<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>PACS影像显示列表</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="description" content="Minimalistic Slideshow Gallery with jQuery" />
        <meta name="keywords" content="minimalistic, slideshow, jquery, gallery, thumbnails, css3"/>
        <script type="text/javascript" src="../../js/newcbb/boot.js"></script>
        <link href="../../js/css/default/jquery.loadmask.css" rel="stylesheet" type="text/css" />
		<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
		<script type="text/javascript" src="../../js/jquery.swipe-events.js"></script>
        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
        <script type="text/javascript" src="../../js/jquery.loadmask.js"></script> 
        <SCRIPT LANGUAGE=javascript SRC="../../js/util.js"></SCRIPT>
        
        <style>
			body{
				background:#ddd;
				font-family:Arial;
			}
			h1{
				position:relative;
				text-indent:-9000px;
				width:557px;
				height:103px;
				margin:20px auto 20px auto;
				background:transparent url(title.png) no-repeat top left;
			}
			span.reference{
				position:fixed;
				left:10px;
				bottom:10px;
				font-size:12px;
			}
			span.reference a{
				color:#666;
				text-shadow:1px 1px 1px #fff;
				text-transform:uppercase;
				text-decoration:none;
				margin-right:30px;
			}
			span.reference a:hover{
				color:#333;
			}
			.content{
				width:100%;
				margin:0 auto;
			}
			
			.msg_slideshow{
				margin:0 auto;
			}
			a.back{
				background:transparent url(back.png) no-repeat top left;
				height:13px;
				width:248px;
				display:block;
				clear:both;
				text-indent:-9000px;
				margin:20px auto;
			}
			a.back:hover{
				background-position:0px -13px;
			}
		</style>
    </head>

    <body id="jcst_body">	
		<div class="content">

		<div id="msg_slideshow" class="msg_slideshow">
			<div id="msg_wrapper" class="msg_wrapper">
				</div>
			<div id="msg_controls" class="msg_controls"><!-- right has to animate to 15px, default -110px -->
				<a href="#" id="msg_grid" class="msg_grid"></a>
				<a href="#" id="msg_prev" class="msg_prev"></a>
				<a href="#" id="msg_pause_play" class="msg_pause"></a><!-- has to change to msg_play if paused-->
				<a href="#" id="msg_next" class="msg_next"></a>
			</div>
			<div id="msg_thumbs" class="msg_thumbs"><!-- top has to animate to 0px, default -230px -->
					
				
				
			</div>
			</div>



		</div>

        <!-- The JavaScript -->
        <script type="text/javascript">
            $(function() {
				/**
				* interval : time between the display of images
				* playtime : the timeout for the setInterval function
				* current  : number to control the current image
				* current_thumb : the index of the current thumbs wrapper
				* nmb_thumb_wrappers : total number	of thumbs wrappers
				* nmb_images_wrapper : the number of images inside of each wrapper
				*/
				var interval			= 4000;
				var playtime;
				var current 			= 0;
				var current_thumb 		= 0;
				var nmb_thumb_wrappers	= $('#msg_thumbs .msg_thumb_wrapper').length;
				var nmb_images_wrapper  = 6;
				var pacsid=""
				var imagelength
				/**
				* start the slideshow
				*/
				getPacs()
				function getPacs(){
				  pacsid=queryString("pacsid")
				  $('#msg_slideshow').height($(window).height()-50);
				  $("#jcst_body").mask("信息加载中，请稍后...");
		                    doc="<APP>"
		                    doc=doc+"<ERR NUM='0'>1</ERR>"
		                    doc=doc+"<C>data/J401405B.jpg</C>"
		                    doc=doc+"<C>data/J3937059.jpg</C>"
		                    doc=doc+"</APP>"
		                    doc=$.parseXML(doc)
							if (doc != null){
								   //alert(doc.xml)
								   
							       var onode=$(doc).find('ERR')
							       
							  //alert(onode.getAttribute("NUM"))
								  if (onode.attr("NUM")!="0"){
								    $("#jcst_body").unmask();
								  	alert(onode.attr("DSC"));returnstr="ERROR"
								  	window.parent.form_close()
								  }
								 else{
								     $("#jcst_body").unmask();
								     var pacslen=$(doc).find('C').length
									 if(pacslen>0){
									     var loopj=1
									     var loopk=1
									     var tempstr=""
									     $(doc).find('C').each(function(){
						                 	var onode= $(this); 
						                 	if(loopj==1 && loopk==1)tempstr=tempstr+'<div class="msg_thumb_wrapper">'
						                 	else if(loopj==1 && loopk!=1)tempstr=tempstr+'<div class="msg_thumb_wrapper" style="display:none;">'
						                 	tempstr=tempstr+'<a href="#"><img src="'+onode.text()+'" alt="'+onode.text()+'" width="75px" height="75px"/></a>'
						                 	if(loopj==6){
						                 	   loopj=0
						                 	   loopk++;
						                 	   tempstr=tempstr+"</div>"
						                 	}
						                 	
						                 	loopj++
						                 })
						                 
						                 if(pacslen%6!=0)tempstr=tempstr+"</div>"
						                 tempstr=tempstr+'<a href="#" id="msg_thumb_next" class="msg_thumb_next"></a>'
						                 tempstr=tempstr+'<a href="#" id="msg_thumb_prev" class="msg_thumb_prev"></a>'
						                 tempstr=tempstr+'<a href="#" id="msg_thumb_close" class="msg_thumb_close"></a>'
						                 tempstr=tempstr+'<span class="msg_loading"></span>'
						                 $("#msg_thumbs")[0].innerHTML=tempstr
						                 imagelength=$.find("img").length
						                 nmb_thumb_wrappers	= $('#msg_thumbs .msg_thumb_wrapper').length;
						                 play();
										 showControls()
										 pause();
										 $('#msg_grid').bind('click',function(e){
												$('#msg_slideshow').unbind('mouseenter').unbind('mouseleave');
												pause();
												$('#msg_thumbs').stop().animate({'top':'0px'},500);
												e.preventDefault();
											});
											
											/**
											* closing the thumbs view,
											* shows the controls
											*/
											$('#msg_thumb_close').bind('click',function(e){
												$('#msg_thumbs').stop().animate({'top':'-230px'},500);
												e.preventDefault();
											});
											
											/**
											* pause or play icons
											*/
											$('#msg_pause_play').bind('click',function(e){
												var $this = $(this);
												if($this.hasClass('msg_play'))
													play();
												else
													pause();
												e.preventDefault();	
											});
											
											/**
											* click controls next or prev,
											* pauses the slideshow, 
											* and displays the next or prevoius image
											*/
											$('#msg_next').bind('click',function(e){
												pause();
												next();
												e.preventDefault();
											});
											$('#msg_prev').bind('click',function(e){
												pause();
												prev();
												e.preventDefault();
											});
											$('#msg_thumb_next').bind('click',function(e){
												next_thumb();
												e.preventDefault();
											});
											$('#msg_thumb_prev').bind('click',function(e){
												prev_thumb();
												e.preventDefault();
											});
											$('#msg_thumbs .msg_thumb_wrapper > a').bind('click',function(e){
													var $this 		= $(this);
													$('#msg_thumb_close').trigger('click');
													var idx			= $this.index();
													var p_idx		= $this.parent().index();
													current			= parseInt(p_idx*nmb_images_wrapper + idx + 1);
													showImage();
													e.preventDefault();
												}).bind('mouseenter',function(){
													var $this 		= $(this);
													$this.stop().animate({'opacity':1});
												}).bind('mouseleave',function(){
													var $this 		= $(this);	
													$this.stop().animate({'opacity':0.5});
												});
												 $('#jcst_body')
													 .swipeEvents()
													 .bind("swipeLeft",  function(){ prev() })
													 .bind("swipeRight", function(){next() })
													 .bind("swipeDown",  function(){prev()})
													 .bind("swipeUp",    function(){ next() });
									 }
									 else{
									   alert("无影像数据!");
									   window.parent.form_close()
									 }
								   }
								   
							}
							else{
							    $("#jcst_body").unmask();
								alert("请求数据错误！")
								window.parent.form_close()
							}

				}
				$(window).resize(function(){
			     showImage()
			  });
				
				function slideshowMouseEvent(){
					$('#msg_slideshow').unbind('mouseenter')
									   .bind('mouseenter',showControls)
									   .andSelf()
									   .unbind('mouseleave')
									   .bind('mouseleave',hideControls);
					}
				
				/**
				* clicking the grid icon,
				* shows the thumbs view, pauses the slideshow, and hides the controls
				*/
				
				
				/**
				* show and hide controls functions
				*/
				function showControls(){
					$('#msg_controls').stop().animate({'right':'15px'},500);
				}
				function hideControls(){
					$('#msg_controls').stop().animate({'right':'-110px'},500);
				}
				
				/**
				* start the slideshow
				*/
				function play(){
					next();
					$('#msg_pause_play').addClass('msg_pause').removeClass('msg_play');
					playtime = setInterval(next,interval)
				}
				
				/**
				* stops the slideshow
				*/
				function pause(){
					$('#msg_pause_play').addClass('msg_play').removeClass('msg_pause');
					clearTimeout(playtime);
				}
				
				/**
				* show the next image
				*/
				function next(){
					++current;
					if(current>imagelength)current=1
					showImage('r');
				}
				
				/**
				* shows the previous image
				*/
				function prev(){
					--current;
					if(current<1)current=imagelength
					showImage('l');
				}
				
				/**
				* shows an image
				* dir : right or left
				*/
				function showImage(dir){
					/**
					* the thumbs wrapper being shown, is always 
					* the one containing the current image
					*/
					alternateThumbs();
					
					/**
					* the thumb that will be displayed in full mode
					*/
					var $thumb = $('#msg_thumbs .msg_thumb_wrapper:nth-child('+current_thumb+')')
								.find('a:nth-child('+ parseInt(current - nmb_images_wrapper*(current_thumb -1)) +')')
								.find('img');
					if($thumb.length){
						var source = $thumb.attr('alt');
						var $currentImage = $('#msg_wrapper').find('img');
						if($currentImage.length){
							$currentImage.fadeOut(function(){
								$(this).remove();
								$('<img />').load(function(){
									var $image = $(this);
									resize($image);
									$image.hide();
									$('#msg_wrapper').empty().append($image.fadeIn());
								}).attr('src',source);
							});
						}
						else{
							$('<img />').load(function(){
									var $image = $(this);
									resize($image);
									$image.hide();
									$('#msg_wrapper').empty().append($image.fadeIn());
							}).attr('src',source);
						}
								
					}
					else{ //this is actually not necessary since we have a circular slideshow
						if(dir == 'r')
							--current;
						else if(dir == 'l')
							++current;	
						alternateThumbs();
						return;
					}
				}
				
				/**
				* the thumbs wrapper being shown, is always 
				* the one containing the current image
				*/
				function alternateThumbs(){
					$('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+current_thumb+')')
									.hide();
					current_thumb = Math.ceil(current/nmb_images_wrapper);
					/**
					* if we reach the end, start from the beggining
					*/
					if(current_thumb > nmb_thumb_wrappers){
						current_thumb 	= 1;
						current 		= 1;
					}	
					/**
					* if we are at the beggining, go to the end
					*/					
					else if(current_thumb == 0){
						current_thumb 	= nmb_thumb_wrappers;
						current 		= current_thumb*nmb_images_wrapper;
					}
					
					$('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+current_thumb+')')
									.show();	
				}
				
				/**
				* click next or previous on the thumbs wrapper
				*/
				
				function next_thumb(){
					var $next_wrapper = $('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+parseInt(current_thumb+1)+')');
					if($next_wrapper.length){
						$('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+current_thumb+')')
										.fadeOut(function(){
											++current_thumb;
											$next_wrapper.fadeIn();									
										});
					}
				}
				function prev_thumb(){
					var $prev_wrapper = $('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+parseInt(current_thumb-1)+')');
					if($prev_wrapper.length){
						$('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+current_thumb+')')
										.fadeOut(function(){
											--current_thumb;
											$prev_wrapper.fadeIn();									
										});
					}				
				}
				
				/**
				* clicking on a thumb, displays the image (alt attribute of the thumb)
				*/
				
				
				/**
				* resize the image to fit in the container (400 x 400)
				*/
				function resize($image){
					var theImage 	= new Image();
					theImage.src 	= $image.attr("src");
					var imgwidth 	= theImage.width;
					var imgheight 	= theImage.height;
					
					var containerwidth  =$(window).width()-80;
					var containerheight = $(window).height()-50;
                
						var newwidth = containerwidth;
						var ratio = imgwidth / containerwidth;
						var newheight = imgheight / ratio;
						if(newheight > containerheight){
							var newnewheight = containerheight;
							var newratio = newheight/containerheight;
							var newnewwidth =newwidth/newratio;
							theImage.width = newnewwidth;
							theImage.height= newnewheight;
						}
						else{
							theImage.width = newwidth;
							theImage.height= newheight;
						}

						var newheight = containerheight;
						var ratio = imgheight / containerheight;
						var newwidth = imgwidth / ratio;
						if(newwidth > containerwidth){
							var newnewwidth = containerwidth;
							var newratio = newwidth/containerwidth;
							var newnewheight =newheight/newratio;
							theImage.height = newnewheight;
							theImage.width= newnewwidth;
						}
						else{
							theImage.width = newwidth;
							theImage.height= newheight;
						}

					$image.css({
						'width'	:theImage.width,
						'height':theImage.height
					});
				}
            });
        </script>
    </body>
</html>